Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Warn about large bundle sizes #2648

Merged
merged 1 commit into from
Jun 27, 2017
Merged

Warn about large bundle sizes #2648

merged 1 commit into from
Jun 27, 2017

Conversation

gaearon
Copy link
Contributor

@gaearon gaearon commented Jun 27, 2017

We now have docs both about code splitting and about analyzing bundles so seems like a good time.

The limits are very liberal IMO. For the vast majority of apps it's possible to fit the main bundle into 512k gzipped, and 1M gzipped for individual chunks. If that doesn't fit you, you might as well need to eject for other reasons (e.g. too slow builds that need fine tuning with HappyPack or similar).

The warning looks like this:
screen shot 2017-06-27 at 23 23 29

In the screenshot I hardcoded it to show the message (to test it), but in practice it will only appear for main bundles > 512k gzipped, and for chunks > 1m gzipped.

This partially alleviates the problem #2645 is hiding. Perf sensitive users will probably notice this. We still don't address the issue in #2612 specifically but there's no way for us to know if the person has opted out of using service workers, so I don't think we can be more detailed there.

@gaearon
Copy link
Contributor Author

gaearon commented Jun 27, 2017

cc @addyosmani

@gaearon gaearon added this to the 1.0.8 milestone Jun 27, 2017
@gaearon gaearon merged commit 7cf4de7 into facebook:master Jun 27, 2017
@gaearon gaearon mentioned this pull request Jun 28, 2017
@addyosmani
Copy link

This is a great first step. The average JS bundle size folks are shipping on mobile is ~420KB. If we can iterate on the 500KB budget over time to get it even smaller that would be amazing. Thanks for shipping support for perf budgets!

@Timer
Copy link
Contributor

Timer commented Jun 29, 2017

@addyosmani what is the target main bundle & chunk sizes we'd like to iterate towards (gzipped)?

I figure the smaller the better, but we shouldn't push users too far if it's a reasonable time to interactive.

@gaearon gaearon deleted the bundle-size branch June 29, 2017 10:06
zangrafx added a commit to absolvent/create-react-app that referenced this pull request Jun 29, 2017
* upstream/master: (55 commits)
  Fix minor typo (facebook#2679)
  Bootstrap with Yarn when available (facebook#2673)
  Add more info about apache client side routing (facebook#2666)
  Test Node 8 on Travis (facebook#2659)
  Add json and css to lint-staged in template README (facebook#2671)
  Add a note about fixed vulnerability in 1.0.8
  Publish
  Changelog for 1.0.8 (facebook#2664)
  Reformat source code with Prettier 1.5.2
  Update Prettier to v1 (facebook#2465)
  Update ISSUE_TEMPLATE.md
  Local testing docker links (facebook#2662)
  Better React Native Web support (facebook#2511)
  Bump dependencies (facebook#2658)
  Minor code style edits to user guide (facebook#2660)
  Don't ask to install webpack for using Styleguidist (facebook#2656)
  Put react-scripts in dependencies, not devDependencies (facebook#2657)
  Razzle added to the alternatives (facebook#2517)
  Warn about large bundle sizes (facebook#2648)
  Add instructions to use source-map-explorer (facebook#1641)
  ...

# Conflicts:
#	packages/react-dev-utils/package.json
#	packages/react-scripts/config/webpack.config.dev.js
#	packages/react-scripts/config/webpack.config.prod.js
#	packages/react-scripts/package.json
romaindso pushed a commit to romaindso/create-react-app that referenced this pull request Jul 10, 2017
wmonk referenced this pull request in wmonk/create-react-app-typescript Aug 7, 2017
@aCandidMind
Copy link

Sorry for my ignorance just came here from twitter, can't this be added in webpack itself? Would come to benefit more people. Or is it even there already somehow? I'm on old webpack versions in all of my projects currently.

@gaearon
Copy link
Contributor Author

gaearon commented Aug 31, 2017

Webpack 2 has something similar with performance hints but we found it easier to build our own since we control the output.

morgs32 pushed a commit to BrickworkSoftware/create-react-app that referenced this pull request Sep 1, 2017
@lock lock bot locked and limited conversation to collaborators Jan 20, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants